<template>
    <div>
        <el-steps :active="active * 1" finish-status="success" style="width: 80%;margin: auto;">
            <!-- {{  $route.query.obj  }} -->
            <el-step title="基本操作"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品属性"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
        </el-steps>
        <el-tabs tab-position="left" v-model="active" :before-leave="fn" style="height: 100%;" @tab-click="tab">
            <el-tab-pane label="基本参数" name="0">
                <el-form :model="goodsList" :rules="rules" ref="goodsList" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="商品名称" prop="goods_name">
                        <el-input v-model="goodsList.goods_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="goods_price">
                        <el-input v-model="goodsList.goods_price"></el-input>
                    </el-form-item>
                    <el-form-item label="商品重量" prop="goods_weight">
                        <el-input v-model="goodsList.goods_weight"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量" prop="goods_number">
                        <el-input v-model="goodsList.goods_number"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类" prop="goods_cat">
                        <el-cascader v-model="goodsList.goods_cat" :options="options"
                            :props="{ expandTrigger: 'hover', label: 'cat_name', value: 'cat_id' }"></el-cascader>
                    </el-form-item>
                </el-form>

            </el-tab-pane>
            <el-tab-pane label="商品参数" name="1">

                <div v-for="(item, index) in obj1" :key="index">
                    <div>{{  item.attr_name  }}</div>
                    <div style="margin: 10px 0px;">
                        <el-tag v-for="(tag, i) in item.attr_vals" :key="tag" closable style="margin: 10px;"
                            @close="del(item.attr_vals, i)">
                            {{  tag  }}
                        </el-tag>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="商品属性" name="2">
                <div v-for="(item, index) in obj2" :key="index">
                    <div style="margin: 10px 0px;">{{  item.attr_name  }}</div>
                    <el-input v-model="item.attr_vals"></el-input>
                </div>
            </el-tab-pane>
            <el-tab-pane label="商品图片" name="3">
                <el-upload class="upload-demo" action="http://127.0.0.1:8888/api/private/v1/upload" :on-success="succes"
                    :file-list="goodsList.pics" :headers="headers" list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>

            </el-tab-pane>
            <el-tab-pane label="商品内容" name="4">
                <quill-editor v-model="goodsList.goods_introduce" class="quill"></quill-editor>
                <el-button type="primary" @click="add" v-if="!id">添加商品</el-button>
                <el-button type="primary" @click="edit" v-if="id">修改商品</el-button>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script>
import { categories, cut, addGoods, edit } from '@/http/goods'
import { quillEditor } from "vue-quill-editor"
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
    components: {
        quillEditor
    },
    data() {

        return {

            active: 0,
            rules: {
                goods_name: [
                    { required: true, message: '不能为空', trigger: 'blur' },

                ],
                goods_cat: [
                    { required: true, message: '不能为空', trigger: 'blur' },

                ], goods_price: [
                    { required: true, message: '不能为空', trigger: 'blur' },

                ], goods_number: [
                    { required: true, message: '不能为空', trigger: 'blur' },

                ], goods_weight: [
                    { required: true, message: '不能为空', trigger: 'blur' },

                ],

            },
            goodsList: {
                //名称
                goods_name: '',
                //分类
                goods_cat: '',
                //价格
                goods_price: '',
                //数量
                goods_number: '',
                //重量
                goods_weight: '',
                //介绍可以为空
                goods_introduce: '',
                //图片可以为空
                pics: [],
                //商品参数可以为空
                attrs: [],


            },
            //选项卡是否切换
            status: false,
            //商品分类数据
            options: [],
            //token
            headers: {
                Authorization: localStorage.getItem('houtaitoken') || ''
            },
            //富文本
            text: '',
            id: 0,
            //参数
            obj1: [],
            //属性
            obj2: []

        }
    },
    methods: {
        // 添加商品
        add() {
            this.goodsList.goods_cat = this.goodsList.goods_cat.join(',')
            addGoods(this.goodsList)
            this.$router.push('/goods')
        },
        tab(v) {
            if (v.name == 1) {
                cut(this.goodsList.goods_cat[this.goodsList.goods_cat.length - 1], { sel: 'many' }).then(res => {

                    this.obj1 = res.data
                    res.data.forEach(element => {
                        element.attr_vals = element.attr_vals.split(',')
                    });
                    console.log(res);
                })
            }
            if (v.name == 2) {
                cut(this.goodsList.goods_cat[this.goodsList.goods_cat.length - 1], { sel: 'only' }).then(res => {

                    this.obj2 = res.data

                    console.log(res);
                })
            }
        },
        fn(activeName, oldActiveName) {

            var status = false
            if (activeName == 1) {

            }
            if (this.$refs.goodsList) {
                this.$refs['goodsList'].validate((valid) => {
                    if (valid) {
                        status = true
                    } else {
                        this.$message.error('请填完信息')
                    }
                });
            } else {
                status = true
            }
            return status
        },
        succes(v) {
            console.log(v);
        },
        //修改商品
        async edit() {
            this.goodsList.goods_cat = this.goodsList.goods_cat.join(',')
            let res = await edit(this.id, this.goodsList)
            this.$router.push('/goods')

        },
        del(r, i) {
            console.log(r);
            r.splice(i, 1)
        }
    },
    created() {

        categories([1, 2, 3]).then(res => {
            console.log(res);
            this.options = res.data
        })
        if (this.$route.query.obj) {
            let obj = JSON.parse(this.$route.query.obj)
            let { goods_id: id, goods_name, goods_cat, goods_price, goods_number, goods_weight } = obj
            this.goodsList.goods_name = goods_name
            this.goodsList.goods_cat = goods_cat
            this.goodsList.goods_price = goods_price
            this.goodsList.goods_number = goods_number
            this.goodsList.goods_weight = goods_weight
            this.id = id
        }
    }
}
</script>

<style >
.cas {
    width: 100%;
    height: 10vh;
    background-color: #000;
}

.el-cascader-panel {
    height: 200px;
}

.el-tag {
    margin: 10px;
}
</style>